<template>
  <div id="category">
    <!-- 头部 -->
    <Header />
    <!-- 内容 -->
    <div class="listWrapper" v-if="!showLoading">
      <!-- 左边 -->
      <div class="leftWrapper">
        <ul class="wrapper">
          <li
            class="categoryItem"
            v-for="(cate, index) in categoriesData"
            :key="cate.id"
            :class="{selected: currentIndex === index}"
            @click="clickLeftLi(index)"
            ref="menuList"
          >
            <div class="textWrapper">{{ cate.name }}</div>
          </li>
          <!-- <li class="categoryItem">
            <div class="textWrapper">安心蔬菜</div>
          </li>
          <li class="categoryItem selected">
            <div class="textWrapper">豆制品</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">新鲜水果</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">肉禽蛋</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">海鲜水产</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">乳酪烘焙</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">营养早餐</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">叮咚心选</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">米面粮油</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">调味品</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">方便速食</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">冰淇淋</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">酒水饮料</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">休闲食品</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">快手菜</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">南北干货</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">宝宝餐</div>
          </li>
          <li class="categoryItem">
            <div class="textWrapper">厨房用品</div>
          </li>-->
        </ul>
      </div>
      <!-- 右边 -->

      <div class="rightWrapper">
        <ContentView :categoriesDetailData="categoriesDetailData" />
      </div>
    </div>
    <van-loading
      v-else
      type="spinner"
      color="#75a342"
      style="position: absolute;left:50%;top: 40%;transform: translate(-50%)"
    >加载中...</van-loading>
  </div>
</template>

<script>
// 1.引入组件
import Header from "./components/Header";
import ContentView from "./components/ContentView";

//2.引入滚动插件
import BScroll from "better-scroll";

// 3.引入数据接口
import { getCategories, getCategoriesDetail } from "@/service/api/index";

//4. 引入订阅消息/通知组件
import Pubsub from "pubsub-js";
import { Toast } from "vant";

//5. 引入vuex
import { mapMutations } from "vuex";

export default {
  name: "category",

  data() {
    return {
      // 是否显示加载图片
      showLoading: true,
      // 左边列表数据
      categoriesData: [],
      // 右边列表数据
      categoriesDetailData: [],
      // 左边选中与否
      currentIndex: 0
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    // 订阅消息, 添加到购物车
    // PubSub.subscribe('categoryAddToCart', (msg, goods)=>{
    //   if(msg ==='categoryAddToCart'){
    //     this.ADD_GOODS({
    //       goodsId: goods.id,
    //       goodsName: goods.name,
    //       smallImage: goods.small_image,
    //       goodsPrice: goods.price
    //     });
    //     // 提示用户
    //     Toast({
    //       message:'添加购物车成功!',
    //       duration:800
    //     })
    //   }
    // })
  },

  components: {
    Header,
    ContentView
  },
  methods: {
    ...mapMutations(["ADD_GOODS"]),

    // 初始化数据和界面
    async initData() {
      //  1.获取左边数据
      let leftRes = await getCategories();
      // console.log(leftRes);
      if (leftRes.success) {
        this.categoriesData = leftRes.data.cate;
      }
      // console.log(this.categoriesData);

      //2.获取右边数据
      let rightRes = await getCategoriesDetail("/lk001}");
      if (rightRes.success) {
        this.categoriesDetailData = rightRes.data.cate;
      }
      // console.log(this.categoriesData, this.categoriesDetailData);
      // 3. 隐藏loading框
      this.showLoading = false;

      //4. 初始化滚动框架
      this.$nextTick(() => {
        this.leftScroll = new BScroll(".leftWrapper", {
          probeType: 3,
          click: true,
          scrollY: true,
          tap: true,
          mouseWheel: true
        });
      });
    },

    // 2. 处理左边点击
    async clickLeftLi(index) {
      // 2.1 改变索引
      this.currentIndex = index;
      // console.log(index);

      // 2.2 Li标签滚动到对应的位置
      // 获取li 标签
      let menuLists = this.$refs.menuList;
      // 获得当前li
      let el = menuLists[index];
      // console.log(el);
      // 2.3 滚动到对应元素上
      this.leftScroll.scrollToElement(el, 300);

      //2.4 获取右边数据
      let rightRes = await getCategoriesDetail(`/lk00${index + 1}`);
      if (rightRes.success) {
        this.categoriesDetailData = rightRes.data.cate;
      }
    }
  }
  // beforeDestroy(){  //使用订阅要设置取消,不然会有BUG
  //   PubSub.unsubscribe('homeAddToCart')
  // }
};
</script>


<style lang='less' scoped>
#category {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.listWrapper {
  position: absolute;
  top: 3.3rem;
  bottom: 4rem;
  overflow: hidden;
  width: 100%;
  display: flex;

  .leftWrapper {
    width: 6rem;
    background-color: #f4f4f4;
  }

  .categoryItem {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e8e9e8;
    position: relative;

    .textWrapper {
      line-height: 1.25rem;
      font-size: 1.1rem;
      color: #666;
      padding: 0.4rem 0.8rem;
      text-align: center;
    }
  }
}

.categoryItem.selected {
  background: #fff;
}

.categoryItem.selected .textWrapper {
  border-left: 4px solid #3cb963;
  font-weight: bold;
  font-size: 0.875rem;
  color: #333333;
}

.rightWrapper {
  position: absolute;
  left: 6rem;
  top: 0rem;
  right: 0rem;
}
</style>